<template>
  <div class="mail">
    <div class="mail-inner">
      <div class="top">
        <div class="left" @click="is_show_code=true">
          <i></i>邀请公司新成员
        </div>
        <div class="right">
          <input type="text" v-model="search_name" @input="searchMember" placeholder="请输入员工姓名"/>
          <i></i>
        </div>
      </div>
      <div class="content">
        <div class="left">
          <el-tree
            :data="deptTree"
            node-key="id"
            default-expand-all
            :props="props"
            :check-on-click-node="true"
            :expand-on-click-node="false"
            @node-click="dept_click"
           >
          </el-tree>
        </div>
        <div class="right">
          <ul class="title-list">
            <li>姓名</li>
            <li>手机号</li>
            <li>所属部门</li>
            <li>APP账号</li>
            <li>用户级别</li>
          </ul>
          <div class="user-list">
            <vuescroll :ops="ops">
              <ul v-for="(item,index) in member_list" :key="index">
                <li v-if="item.headImage">
                  <span  class="header-img"
                    :style="{backgroundImage: 'url(\''+ (encodeURI(item.headImage)) +'\')' }"></span>{{item.name}}
                </li>
                <li v-if="!item.headImage">
                  <span  class="default-img"></span>{{item.name}}
                </li>
                <li>{{item.phone}}</li>
                <li>{{item.departmentName}}</li>
                <li>{{item.phone}}</li>
                <li>{{item.level==1?'高级':'普通'}}</li>
              </ul>
            </vuescroll>
          </div>
        </div>
      </div>
      <loading v-if="is_show_loading"></loading>
    </div>
    <!--    邀请公司新成员-->
    <div class="my-code" v-if="is_show_code">
      <div class="my-code-inner">
        <div class="title">
          邀请公司新成员
          <i @click="is_show_code=false"></i>
        </div>
        <p class="code-info">
         {{this.$store.state.userInfo.name}}邀请您加入成都亿橙科技有限公司，企业码为<span>{{this.$store.state.userInfo.comCode}}</span>
        </p>
        <p class="code-info">
         {{link}}?comCode= {{this.$store.state.userInfo.comCode}}
        </p>
        <p class="tips">点击“复制”按钮复制粘贴到微信和QQ即可完成分享</p>
        <div class="btn" @click="copyMyCode">复制</div>
      </div>
    </div>
    <!--    邀请公司新成员-->
  </div>
</template>

<script>
  import vuescroll from 'vuescroll'
  import loading from '@/components/loading'
  export default {
    name: "",
    components: {
      vuescroll,loading
    },
    data(){
      return{
        is_show_loading:true,
        include:true,
        link:'https://www.smartptm.com/pc2/index.html#/register/registerForm?is_have_code=2',
        is_show_code:false,
        search_name:'',
        timerIndex: '',
        deptTree: [],
        props:{label:'name'},
        member_list:[],
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '40px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '0px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        search_departmentId:'',
        copy_text: 'https://www.smartptm.com/pc2/index.html#/register/registerForm?is_have_code=2&comCode='+this.$store.state.userInfo.comCode,
      }
    },
    created(){
      this.get_deptTree();
      this.query_member_list();
    },
    methods:{
      //复制
      copyMyCode(){
        let oInput = document.createElement('input');
        oInput.value = this.copy_text;
        document.body.appendChild(oInput);
        oInput.select();
        document.execCommand("Copy");
        oInput.style.display = 'none';
        document.body.removeChild(oInput);
        this.$message.success("复制成功");
        this.is_show_code=false;
      },
      //查询通讯录列表
      query_member_list() {
        this.$http.get('user/user/list', {
          params: {
            companyId: this.$store.state.userInfo.companyId,
            name: this.search_name,
            queryAll: false,
            departmentId:this.search_departmentId,
            include:this.include
          }
        }).then(res => {
          if (res.statusCode == 200) {
            this.member_list = res.data;
            setTimeout(()=> {
              this.is_show_loading=false;
            }, 1000);
          } else {
            this.$message.error(res.statusMsg);
          }
        });
      },
      //查询部门tree
      get_deptTree() {
        this.$http.post('user/department/deptTree', {
          comId: this.$store.state.userInfo.companyId,
        }).then(res => {
          if (res.statusCode == 200) {
            this.deptTree = [res.data];
          } else {
            this.$message.error(res.statsuMsg);
          }
        })
      },
      //点击部门节点
      dept_click(data,node,item){
        if(data.level==1){
          this.include=true;
        }else {
          this.include=false;
        }

        this.search_departmentId=data.id;
        this.query_member_list();
      },
      //搜索成员
      searchMember() {
        clearTimeout(this.timerIndex);
        this.timerIndex = setTimeout(() => {
          this.query_member_list();
        }, 1000)
      },
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .mail {
    width: 100%;
    height: 100%;
    padding: 24px;

    .mail-inner {
      position: relative;
      background-color: #ffffff;
      width: 100%;
      height: 100%;
      border-radius: 6px;
      padding: 0 24px;
      .top {
        height: 88px;
        .left{
          position: relative;
          float: left;
          line-height: 88px;
          font-size: 14px;
          color: #96A2AA;
          text-indent: 21px;
          cursor: pointer;
          i{
            position: absolute;
            width: 12px;
            height: 12px;
            left: 0;
            top: 38px;
            background-image: url("../../assets/img/ht/ic_add2.png");
            background-size: cover;
            background-position: center;
          }
        }
        .right{
          float: right;
          padding-top: 24px;
          position: relative;
          >input{
            width: 320px;
            height: 40px;
            line-height: 40px;
            border: none;
            background-color: #F2F6F9;
            border-radius: 6px;
            font-size: 14px;
            text-indent: 16px;
          }
          > i {
            position: absolute;
            width: 18px;
            height: 18px;
            right: 12px;
            top: 36px;
            cursor: pointer;
            background-image: url("../../assets/img/ht/member/ic_search.png");
          }
        }
      }

      .content {
        height: calc(100% - 88px);
        padding-bottom: 24px;
        display: flex;
        .left{
          width: 360px;
          height: 100%;
          background-color: #F1F5F8;
          margin-right:24px ;
          padding-top: 32px;
          padding-left: 32px;
        }
        .right{
          width: calc(100% - 360px);
          .title-list {
            height: 48px;
            background-color: #F2F6F9;
            line-height: 48px;
            display: flex;

            li {
              flex: 1;
              text-align: center;
              color: #96A2AA;
              font-size: 14px;
            }
            li:first-child{
              text-align: left;
              padding-left: 80px;
            }
          }

          .user-list {
            height: calc(100% - 48px);

            ul {
              display: flex;

              li {
                flex: 1;
                text-align: center;
                line-height: 80px;
                height: 80px;
                font-size: 14px;

                > .header-img {
                  display: inline-block;
                  background-size: cover;
                  width: 32px;
                  height: 32px;
                  border-radius: 50%;
                  vertical-align: middle;
                  margin-right: 15px;
                }
                >.default-img{
                  display: inline-block;
                  background-size: cover;
                  width: 32px;
                  height: 32px;
                  border-radius: 4px;
                  vertical-align: middle;
                  margin-right: 15px;
                  /*background-image: url("../../assets/img/ic_dh_tx.png");*/
                  background-image: url("../../assets/img/ic_my_head.png");
                  background-repeat: no-repeat;
                  background-position: center;
                }
              }
              li:first-child{
                text-align: left;
                padding-left: 80px;
              }
            }
          }
        }
      }
    }
    .my-code{
      background-color: rgba(0,0,0,0.5);
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 100;
      .my-code-inner{
        width: 460px;
        height: 240px;
        background-color: #ffffff;
        border-radius: 6px;
        position: absolute;
        left: 0;
        right: 0;
        bottom:0;
        top: 0;
        margin: auto;
        padding: 32px 32px 24px 32px;
        > .title {
          line-height: 1.1;
          font-size: 16px;
          color: #454a55;
          position: relative;
          height: 48px;
          font-weight: 600;

          > i {
            background-size: 16px 17px;
            background-position: center;
            background-repeat: no-repeat;
            position: absolute;
            width: 16px;
            height: 17px;
            background-image: url("../../assets/img/close_icon.png");
            top: 0px;
            right: 0px;
            cursor: pointer;
          }
        }
        .code-info{
          color: #454A55;
          font-size: 14px;
          line-height: 20px;
          span{
            font-weight: bold;
          }
        }
        .tips{
          margin-top: 20px;
          color: #96A2AA;
          font-size: 12px;
        }
        .btn{
          position: absolute;
          background-color: #0755DB;
          width: 88px;
          line-height: 32px;
          height: 32px;
          text-align: center;
          border-radius: 6px;
          color: #ffffff;
          font-size: 14px;
          bottom: 24px;
          right: 32px;
          cursor: pointer;
        }
      }
    }
  }
</style>
<style type="text/scss" lang="scss">
  .mail{
    .el-tree{
      background-color: #F1F5F8;
    }
    .el-tree-node__content:hover{
      background-color: #F1F5F8;
    }
    .el-tree-node__content{
      height: 40px;
      font-size: 14px;
    }
    .is-current{
      >.el-tree-node__content{
        >.el-tree-node__label{
          color: #0a52e4;
        }
      }

    }
  }

</style>
